<!-- 
说明：会员奖励结算流水列表
作者：292303959@qq.com
日期：2018-10-17 10:6:12
版本：1.0.0
-->
<template>
  <div>
    <mk-search-box>
      <el-row>
        <el-col :span="5">
          <label>会员名称:</label>
          <el-input v-model="ui.searchData.mname"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label>结算时间:</label>
          <el-date-picker v-model="ui.searchData.rfdate"
                          type="daterange"
                          align="right"
                          format="yyyy-MM-dd"
                          placeholder="选择日期范围"></el-date-picker>
        </el-col>
        <el-col :span="5">
          <label>支付状态:</label>
          <mk-config-select mk-config="Z_MB_FLOW_PAY"
                            v-model="ui.searchData.paystate"
                            size="small"
                            mkEmptyLabel="请选择">
          </mk-config-select>
        </el-col>
        <el-col :span="5">
          <label>结算单类型:</label>
          <mk-config-select mk-config="Z_MB_FLOW_TYPE"
                            v-model="ui.searchData.rftype"
                            size="small"
                            mkEmptyLabel="请选择">
          </mk-config-select>
        </el-col>
        <el-col :span="3">
          <mk-search-buttons v-model="ui.searching" />
        </el-col>
      </el-row>
    </mk-search-box>
    <el-row>
      <mk-button :type="0"
                 icon="el-icon-plus"
                 @click="buildMflow">生成会员结算单</mk-button>
      <mk-button :type="0"
                 icon="el-icon-plus"
                 @click="buildPreMflow">生成会长结算单</mk-button>
    </el-row>
    <mk-table v-model="ui"
              mk-index
              mk-sql-code="tMbRevenueFlow.select_list"
              mk-table-id="t-mb-revenue-flow.list.common"
              :mk-init-search-data="initSearchData"
              ref="table">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div>
            <mk-table mk-index
                      :mk-uri="`/tMbRevenueFlow/list.json?orderid=${scope.row.rfid}&rftype=${scope.row.rftype}`"
                      :mk-table-id="`t-mb-revenue-flow.list.common.${scope.row.rfid}`"
                      :mk-init-search-data="initChildSearchData"
                      ref="table">
              <el-table-column align="left"
                               prop="orderid"
                               label="订单编号"
                               width="200" />
              <el-table-column align="left"
                               prop="detailtotal"
                               label="订单总额"
                               width="200" />
              <el-table-column align="left"
                               prop="famount"
                               label="首单奖励"
                               v-if="scope.row.rftype==0"
                               width="200" />
              <el-table-column align="left"
                               prop="ramount"
                               label="返单奖励"
                               v-if="scope.row.rftype==0"
                               width="70" />
            </mk-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       prop="mname"
                       label="会员名称"
                       width="200" />
      <el-table-column align="left"
                       prop="rfdate"
                       label="结算时间"
                       sortable="custom"
                       width="150" />
      <el-table-column align="left"
                       prop="rfamount"
                       label="结算总金额"
                       width="100" />
      <el-table-column align="left"
                       prop="rftype"
                       label="结算单类型"
                       width="100">
        <template slot-scope="rftypescope">
          {{rftypescope.row.rftype | data-config('Z_MB_FLOW_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column align="left"
                       prop="paydate"
                       label="支付时间"
                       sortable="custom"
                       width="150" />
      <el-table-column align="left"
                       prop="paystate"
                       label="支付状态"
                       width="100">
        <template slot-scope="paystatescope">
          {{paystatescope.row.paystate | data-config('Z_MB_FLOW_PAY')}}
        </template>
      </el-table-column>
      <el-table-column prop="doing"
                       align="center"
                       label="操作"
                       width="120">
        <template slot-scope="scope">
          <mk-button :type="4"
                     @click="confirmPay(scope.row.rfid,scope.row.rftype)"
                     confirm-text="确定线下已经支付了吗？"
                     v-if="scope.row.paystate==0">支付</mk-button>
        </template>
      </el-table-column>
    </mk-table>
  </div>
</template>

<script>
  import {
    MkBase
  } from 'element-ui'
  import Add from './list/add-button'
  import Edit from './list/edit-button'
  import searchData from './list/search-data'
  import dayjs from 'dayjs'

  export default {
    name: 't-mb-revenue-flow-list',
    mixins: [MkBase],
    components: {
      Add,
      Edit
    },
    data () {
      return {
        ui: {
          searching: true,
          searchData: searchData()
        }
      }
    },
    methods: {
      /**
       * 刷新本页面
       */
      doSearch () {
        this.ui.searching = true
      },
      async  buildMflow () {
        let data = await this.$post('/tMbRevenueFlow/buildMflow.json')
        if (data) {
          this.doSearch()
        }
      },
      async  buildPreMflow () {
        let data = await this.$post('/tMbRevenueFlow/buildPreMflow.json')
        if (data) {
          this.doSearch()
        }
      },
      async confirmPay (rfid, rftype) {
        let data = await this.$post('/tMbRevenueFlow/confirmPay.json', {
          rfid: rfid,
          rftype: rftype
        })
        if (data) {
          this.doSearch()
        }
      },
      initSearchData (data, flag) {
        if (data.rfdate.length > 0) {
          data.bdate = dayjs(data.rfdate[0]).format('YYYY-MM-DD 00:00:00')
          data.edate = dayjs(data.rfdate[1]).format('YYYY-MM-DD 23:59:59')
        }
      }
    }
  }
</script>